import { forwardRef, useEffect, useState } from 'react'
import { Empty, Spin, message } from 'antd'
import { BasicResponse, RESPONSE_TIPS, STATUS_CODE } from '@common/const/const.tsx'
import { useFetch } from '@common/hooks/http.ts'
import { LoadingOutlined } from '@ant-design/icons'
import EmptySVG from '@common/assets/empty.svg'
import { $t } from '@common/locales/index.ts'
import ApiDocument from '@common/components/aoplatform/ApiDocument.tsx'
import { useParams } from 'react-router-dom'
import { RouterParams } from '@core/components/aoplatform/RenderRoutes.tsx'
import {
  AiServiceInsideApiDocumentHandle,
  AiServiceInsideApiDocumentProps,
  AiServiceApiDetail
} from '@core/const/ai-service/type.ts'

const AiServiceInsideApiDocument = forwardRef<AiServiceInsideApiDocumentHandle, AiServiceInsideApiDocumentProps>(() => {
  const { serviceId, teamId } = useParams<RouterParams>()
  const { fetchData } = useFetch()
  const [apiDetail, setApiDetail] = useState<AiServiceApiDetail>()
  const [loading, setLoading] = useState<boolean>(false)

  useEffect(() => {
    getApiDetail()
  }, [])

  const getApiDetail = () => {
    setLoading(true)
    fetchData<BasicResponse<{ doc: AiServiceApiDetail }>>('service/api_doc', {
      method: 'GET',
      eoParams: { service: serviceId, team: teamId },
      eoTransformKeys: ['update_time']
    })
      .then((response) => {
        const { code, data, msg } = response
        if (code === STATUS_CODE.SUCCESS) {
          setApiDetail(data.doc?.content)
        } else {
          message.error(msg || $t(RESPONSE_TIPS.error))
        }
      })
      .finally(() => {
        setLoading(false)
      })
  }

  const ApiPreview = ({ spec }: { spec?: string | object }) => {
    return (
      <div className="h-full overflow-hidden">
        <div className="flex-1 h-full overflow-auto pr-PAGE_INSIDE_X">
          <ApiDocument spec={spec} />
        </div>
      </div>
    )
  }

  return (
    <>
      <Spin
        indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />}
        spinning={loading}
        wrapperClassName=" h-full overflow-hidden "
      >
        <div className=" h-full ai-service-api-preview">
          {apiDetail ? <ApiPreview spec={apiDetail} /> : <Empty image={EmptySVG}></Empty>}
        </div>
      </Spin>
    </>
  )
})

export default AiServiceInsideApiDocument
